<template>
  <div class="password">
    <van-nav-bar
        title="设置新密码"
        left-arrow
        @click-left="onClickLeft"
    />
    <van-form @submit="onSubmit">
      <van-field
          autocomplete="new-password"
          type="password"
          v-model="oldPassword"
          name="oldPassword"
          placeholder="原始密码"
          :rules="[{ required: true, message: '' }]"
      />
      <van-field
          autocomplete="new-password"
          type="password"
          v-model="newPassword"
          name="newPassword"
          placeholder="设置新密码"
          :rules="[{ required: true, message: '' }]"
      />
      <van-field
          autocomplete="new-password"
          type="password"
          v-model="surePassword"
          name="surePassword"
          placeholder="确认新密码"
          :rules="[{ required: true, message: '' }]"
      />
      <!-- <van-field
               v-model="code"
               name="code"
               center
               clearable
               label="短信验证码"
               placeholder="输入短信验证码"
               :rules="[{ required: true, message: '' }]"
       >
           <template #button>
               <van-button size="small" type="primary">发送验证码</van-button>
           </template>
       </van-field>-->
      <div style="margin: 16px;">
        <van-button round block type="danger" native-type="submit">确认修改</van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">

import {useRouter} from "vue-router";
import {changePwd} from "../api/user";
import {reactive,toRefs,ref} from "vue";
const state = reactive({
  oldPassword:'',
  surePassword:'',
  newPassword:''
})
let {oldPassword,surePassword,newPassword} = toRefs(state)
const router = useRouter()
const onClickLeft =()=>{
  router.back()
}
const onSubmit =async (values)=>{
  console.log(values)
  let response = await changePwd(values)
  router.back()
}
</script>

<style scoped lang="less">
.password {
  /*padding-top: 2rem;*/
  background-color: #fff;
}
</style>
